import { ProTable } from '@ant-design/pro-components';
import { Button, Tag, Popconfirm, message, Breadcrumb } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import { useRequest } from 'umi';
import {
  ModalForm,
  ProForm,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';
import styles from './index.less';
import ImportExcel from '../ImportExcel';
import ExportExcel from '@/components/ExportExcel2';

export default () => {
  //获取国别
  const getLike = useRequest((data = { field: 'country' }) => {
    return {
      url: `http://10.1.40.84:9993/getLike`,
      method: 'POST',
      headers: {
        Authorization: localStorage.getItem('token') || '',
      },
      data,
    };
  });
  //获取研究团队
  const getAllAcademicCommittee = useRequest((data = {}) => {
    return {
      url: `http://10.1.40.84:9993/research/getAllResearchTeam`,
      method: 'POST',
      headers: {
        Authorization: localStorage.getItem('token') || '',
      },
      data,
    };
  });
  //新增人员
  const addAcademicCommitteeDetail = useRequest(
    (data = {}) => {
      return {
        url: `http://10.1.40.84:9993/research/addResearchTeamDetail`,
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
    },
  );
  //更新人员
  const updateAcademicCommitteeDetail = useRequest(
    (data = {}) => {
      return {
        url: `http://10.1.40.84:9993/research/updateResearchTeamDetail`,
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
    },
  );
  //删除人员
  const deleteAcademicCommitteeDetail = useRequest(
    (data = {}) => {
      return {
        url: `http://10.1.40.84:9993/research/deleteResearchTeamDetail`,
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
    },
  );
  const confirm = (e: any) => {
    deleteAcademicCommitteeDetail.run({ id: e.id }).then(() => {
      getAllAcademicCommittee.run();
      message.success('删除成功');
    });
  };
  const cancel = (e: any) => {
    message.error('已取消');
  };
  const columns = [
    {
      title: '研究方向',
      align: 'center',
      dataIndex: 'directionName',
      key: 'directionName',
      // copyable: true,
      // ellipsis: true,
      // render:(text:any)=>sap
      width: 220,
    },
    {
      title: '学术带头人',
      align: 'center',
      dataIndex: 'researchLeader',
      key: 'researchLeader',
      // copyable: true,
      // ellipsis: true,
      hideInSearch: true,
      width: 100,
    },
    {
      title: '代表性研究团队名称',
      align: 'center',
      dataIndex: 'researchName',
      key: 'researchName',
      // copyable: true,
      // ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '团队成员',
      align: 'center',
      dataIndex: 'researchMember',
      key: 'researchMember',
      // copyable: true,
      // ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '任职年份',
      align: 'center',
      dataIndex: 'year',
      key: 'year',
      valueType: 'dateYear',
      hideInTable: true,
    },
    {
      title: '任职年份',
      align: 'center',
      dataIndex: 'years',
      key: 'years',
      hideInSearch: true,
      render: (text: any) =>
        (text || [])?.sort().map((item: any, index: any) => {
          return <Tag key={index}>{item}</Tag>;
        }),
    },
    {
      title: '操作',
      key: 'option',
      valueType: 'option',
      width: 100,
      render: (text: any, record: any) => [
        <ModalForm
          title="编辑"
          trigger={<a> 编辑 </a>}
          autoFocusFirstInput
          modalProps={{
            onCancel: () => console.log('run'),
            destroyOnClose: true,
          }}
          submitTimeout={2000}
          onFinish={async (values) => {
            updateAcademicCommitteeDetail.run(values).then(() => {
              getAllAcademicCommittee.run();
            });
            return true;
          }}
          key="1"
          initialValues={record}
          grid={true}
        >
          <ProFormText name="id" hidden />
          <ProForm.Group>
            <ProFormText
              colProps={{ span: 6 }}
              name="researchLeader"
              label="学术带头人"
              rules={[{ required: true, message: '请输入' }]}
            />
            <ProFormText
              colProps={{ span: 6 }}
              name="directionName"
              label="研究方向"
              rules={[{ required: true, message: '请输入' }]}
            />
            <ProFormText
              colProps={{ span: 12 }}
              name="researchName"
              label="代表性研究团队名称"
              rules={[{ required: true, message: '请输入' }]}
            />
          </ProForm.Group>
          <ProForm.Group>
            <ProFormText
              colProps={{ span: 12 }}
              name="researchMember"
              label="团队成员"
              rules={[{ required: true, message: '请输入' }]}
            />
            <ProFormSelect
              colProps={{ span: 12 }}
              options={[
                {
                  value: 2026,
                  label: '2026',
                },
                {
                  value: 2025,
                  label: '2025',
                },
                {
                  value: 2024,
                  label: '2024',
                },
                {
                  value: 2023,
                  label: '2023',
                },
                {
                  value: 2022,
                  label: '2022',
                },
                {
                  value: 2021,
                  label: '2021',
                },
                {
                  value: 2020,
                  label: '2020',
                },
                {
                  value: 2019,
                  label: '2019',
                },
                {
                  value: 2018,
                  label: '2018',
                },
                {
                  value: 2017,
                  label: '2017',
                },
              ]}
              name="years"
              label="任职年份"
              mode="multiple"
              rules={[{ required: true, message: '请选择' }]}
            />
          </ProForm.Group>
        </ModalForm>,
        <Popconfirm
          key={'2'}
          title="确定删除吗？"
          onConfirm={() => confirm(record)}
          onCancel={() => cancel}
          okText="确定"
          cancelText="取消"
        >
          <a href="#">删除</a>
        </Popconfirm>,
      ],
    },
  ];
  const Refresh = () => {
    getAllAcademicCommittee.run();
  };
  return (
    <PageContainer
      header={{
        title: (
          <div>选取年份查询后,绿色代表当年新加入人员，红色代表当年退出人员</div>
        ),
        breadcrumb: (
          <Breadcrumb>
            <Breadcrumb.Item>队伍建设与人才培养</Breadcrumb.Item>
            <Breadcrumb.Item>研究团队</Breadcrumb.Item>
          </Breadcrumb>
        ),
        // extra: [
        //   <ImportExcel key="1" tableName={'RESEARCH_TEAM'} Refresh={Refresh} />,
        //   <Button
        //     key="2"
        //     type="primary"
        //     onClick={() => {
        //       window.open(
        //         'http://10.1.40.84:9993/file/model/RESEARCH_TEAM_模板.xlsx',
        //       );
        //     }}
        //   >
        //     下载模版
        //   </Button>,
        // ],
      }}
    >
      <ProTable
        columns={columns}
        dataSource={getAllAcademicCommittee?.data || []}
        rowKey="id"
        pagination={{
          showQuickJumper: true,
        }}
        rowClassName={(record: any) => {
          if (record.yearFlag === '离开') {
            return styles.leave;
          } else if (record.yearFlag === '正常') {
            return null;
          } else if (record.yearFlag === '新增') {
            return styles.add;
          } else {
            return null;
          }
        }}
        dateFormatter="string"
        headerTitle="研究团队列表"
        options={false}
        onReset={() => {
          getAllAcademicCommittee.run();
        }}
        onSubmit={(e) => {
          getAllAcademicCommittee.run(e);
        }}
        toolBarRender={() => [
          <ExportExcel
            key="ExportExcel"
            dataSource={getAllAcademicCommittee?.data}
            columns={columns}
          />,
          <ModalForm
            title="新增研究团队"
            trigger={
              <Button key="primary" type="primary">
                {' '}
                新增研究团队{' '}
              </Button>
            }
            autoFocusFirstInput
            modalProps={{
              onCancel: () => console.log('run'),
            }}
            submitTimeout={2000}
            onFinish={async (values) => {
              addAcademicCommitteeDetail.run(values).then(() => {
                getAllAcademicCommittee.run();
              });
              return true;
            }}
            grid={true}
            key="1"
          >
            <ProFormText name="id" hidden />
            <ProForm.Group>
              <ProFormText
                colProps={{ span: 6 }}
                name="researchLeader"
                label="学术带头人"
                rules={[{ required: true, message: '请输入' }]}
              />
              <ProFormText
                rules={[{ required: true, message: '请输入' }]}
                colProps={{ span: 6 }}
                name="directionName"
                label="研究方向"
              />
              <ProFormText
                colProps={{ span: 12 }}
                name="researchName"
                label="代表性研究团队名称"
                rules={[{ required: true, message: '请输入' }]}
              />
            </ProForm.Group>
            <ProForm.Group>
              <ProFormText
                rules={[{ required: true, message: '请输入' }]}
                colProps={{ span: 12 }}
                name="researchMember"
                label="团队成员"
              />
              <ProFormSelect
                colProps={{ span: 12 }}
                options={[
                  {
                    value: 2026,
                    label: '2026',
                  },
                  {
                    value: 2025,
                    label: '2025',
                  },
                  {
                    value: 2024,
                    label: '2024',
                  },
                  {
                    value: 2023,
                    label: '2023',
                  },
                  {
                    value: 2022,
                    label: '2022',
                  },
                  {
                    value: 2021,
                    label: '2021',
                  },
                  {
                    value: 2020,
                    label: '2020',
                  },
                  {
                    value: 2019,
                    label: '2019',
                  },
                  {
                    value: 2018,
                    label: '2018',
                  },
                  {
                    value: 2017,
                    label: '2017',
                  },
                ]}
                name="years"
                label="任职年份"
                mode="multiple"
                rules={[{ required: true, message: '请选择' }]}
              />
            </ProForm.Group>
          </ModalForm>,
        ]}
      />
    </PageContainer>
  );
};
